* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

i {
    font-style: normal;
}

html,
body {
    height: 100%;
    /* height: 1000px; */
}


/* 头部 */

.elm {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header {
    height: 100%;
    height: 2.533333rem;
    background-color: #0092ff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

header .header_top {
    padding-left: .373333rem;
}

header .header_top:nth-child(1) i {
    font-size: .426667rem;
    color: #ffffff;
}

header .header_top span {
    font-size: .453333rem;
    color: #ffffff;
}

header .header_top:nth-child(2) i {
    font-size: 3px;
    color: #ffffff;
}

.header_bottom {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.header_bottom i {
    position: absolute;
    left: 82px;
    color: #9d9d9d;
}

.header_bottom input {
    width: 9.28rem;
    height: .973333rem;
    font-size: .373333rem;
    color: #9d9d9d;
    text-align: center;
}


/* 内容 */

main {
    flex: 1;
    overflow: auto;
}

.wrap {
    display: flex;
    flex-direction: column;
}


/* 导航 */

main .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

main .nav li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

main .nav li img {
    width: 2rem;
    height: 2rem;
}

main .nav li span {
    font-size: .293333rem;
    color: #9d9d9d;
}


/* 广告 */

main .ad {
    display: flex;
    justify-content: space-around;
    margin-top: .533333rem;
}

main .ad .ad_left h3 {
    font-size: .426667rem;
    font-weight: 700;
}

main .ad .ad_left p {
    font-size: .346667rem;
    color: #868686;
}

main .ad .ad_left span {
    font-size: .346667rem;
    color: #b58c6e;
}

main .ad .ad_right img {
    width: 3.84rem;
    height: 2.506667rem;
}


/* 会员 */

main .vip {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 9.466667rem;
    height: 1.066667rem;
    margin: 0 auto;
    background-color: #f7e4ac;
}

main .vip .vip_left {
    display: flex;
    justify-content: center;
    align-items: center;
}

main .vip .vip_left i {
    font-size: .453333rem;
    color: #d7b367;
    margin-right: .266667rem;
}

main .vip .vip_left span {
    font-size: .346667rem;
    font-weight: 700;
    color: #6c5424;
}

main .vip .vip_left p {
    font-size: .266667rem;
    color: #735d2b;
}

main .vip .vip_right span {
    font-size: .266667rem;
    color: #735d2b;
}


/* 红包 */

.hongbao {
    width: 9.466667rem;
    height: 2.346667rem;
    background-color: #0886ff;
    display: flex;
    margin: 10px auto;
}

.hongbao_left {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hongbao_left h2 {
    font-size: .48rem;
    color: #ffffff;
}

.hongbao_left .free {
    width: 3.306667rem;
    height: .426667rem;
    background-color: #fff;
    border-radius: .213333rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .24rem;
}

.hongbao_left .free span {
    font-size: .32rem;
    color: #0886ff;
}

.hongbao_right {
    flex: 1;
}

.hongbao .hongbao_right img {
    width: 2.746667rem;
    height: 2.333333rem;
}


/* 推荐商家 */

.recommend {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: .506667rem;
}

.business {
    margin-bottom: .64rem;
}

.business h2 {
    font-size: .4rem;
    color: #050505;
}

.business h2 span {
    color: #999999;
    margin: 0 .24rem;
}

.classification {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.classification li span {
    font-size: .373333rem;
    color: #727272;
}

.classification li i:nth-child(1) {
    font-size: .08rem;
    color: #313131;
}

.classification li i:nth-child(4) {
    font-size: .32rem;
    color: #676767;
}


/* 内容 */

.content {
    width: 100%;
    margin-top: .72rem;
}

.products {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-bottom: .853333rem;
}

.products_img img {
    width: 2.186667rem;
    height: 1.813333rem;
}

.products_right {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.products_right .brands {
    display: flex;
    justify-content: space-between;
}

.products_right .brands span {
    width: .72rem;
    height: .466667rem;
    border-radius: 5px;
    background-color: #fee91e;
    font-size: .266667rem;
    color: #724615;
    display: flex;
    justify-content: center;
}

.products_right .brands h2 {
    /* width: 100%; */
    font-size: .373333rem;
    font-weight: 700;
}

.products_right .brands i {
    color: #838383;
    margin-right: .426667rem;
}

.evaluation {
    display: flex;
    justify-content: space-between;
    margin: .346667rem 0;
}

.evaluation .evaluation_left {
    width: 3.813333rem;
    display: flex;
    justify-content: space-between;
}

.evaluation .evaluation_left i {
    font-size: .266667rem;
    color: #6b6b6b;
}

.evaluation .evaluation_right span {
    width: 1.12rem;
    height: .333333rem;
    border-radius: 2px;
    background-color: #01a1ff;
    color: #ffffff;
    font-size: .266667rem;
    margin-right: .426667rem;
}

.evaluation_left span {
    display: block;
    width: 1.373333rem;
    height: .266667rem;
    background: url(../images/xingxing1.png);
    background-size: .293333rem .293333rem;
}

.distribution {
    width: 7.6rem;
    display: flex;
    justify-content: space-between;
    margin-top: .333333rem;
}

.distribution_left span {
    font-size: .266667rem;
    color: #6b6b6b;
}

.distribution_right span {
    font-size: .266667rem;
    color: #6b6b6b;
    margin-right: .213333rem;
}

.quality span {
    width: 1.253333rem;
    height: .4rem;
    border: 1px solid #dddddd;
    box-shadow: 5 5 3 rgba(184, 181, 181, 0.2);
    font-size: .266667rem;
    color: #6b6b6b;
}

.less {
    display: flex;
    justify-content: space-between;
    font-size: .266667rem;
    color: #6b6b6b;
    margin-top: .613333rem;
}

.less .less_left {
    display: flex;
    margin-bottom: .293333rem;
}

.less .less_left span {
    display: block;
    width: .373333rem;
    height: .373333rem;
    background-color: #eb7478;
    color: #ffffff;
    margin-right: .16rem;
    line-height: .373333rem;
}

.less .less_right {
    margin-right: .293333rem;
}

.change {
    display: flex;
    font-size: .266667rem;
    color: #6b6b6b;
}

.change span {
    display: block;
    width: .373333rem;
    height: .373333rem;
    background-color: #eb7478;
    color: #ffffff;
    margin-right: .16rem;
    line-height: .373333rem;
}


/* 底部 */

footer {
    height: 1.4rem;
}

footer .icon {
    display: flex;
    height: 100%;
    justify-content: space-around;
}

footer .icon li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

footer .icon li i {
    font-size: .506667rem;
    color: #999999;
}

footer .icon li span {
    font-size: .213333rem;
    color: #999999;
}